<template>
  <div>
    <!-- 头部 -->
    <van-sticky>
      <home-header :lableList="this.catalog" v-on:theRouter="theRouter"/>
    </van-sticky>

    <!-- 菜单 -->
    <div class="home-content">
      <!-- 菜单 -->
      <div class="home-content-left" >
        <el-menu
          :router="true"
          default-active="2"
          :unique-opened="true"
          class="el-menu-vertical-demo"
          active-text-color="#ffd04b"
          text-color="#000000"
          >
          <!-- 遍历一级菜单 -->
          <div v-for="(items ,index) in menuList">
            <!-- 有二级菜单 el-submenu -->
            <el-submenu :index="items.t.menuName" v-show="items.size >= 1" :style="{marginTop:5+'px'}">
              <template slot="title">
                <i class="iconfont" style="font-size: 25px;color: #000000;" v-html="items.t.menuIcon"></i>
                &nbsp;<span>{{items.t.menuName}}</span>
              </template>
              <!-- 遍历二级菜单 -->
              <div v-for="(item,index1) in items.children" :style="{marginTop:0+'px'}">
                <el-submenu :index="item.t.menuName" v-show="item.size >= 1">
                  <template slot="title">{{item.t.menuName}}</template>
                  <!-- 遍历三级菜单 -->
                  <el-menu-item :index="children.t.menuUrl" :key="index" v-for="(children,index) in item.children" @click="menu3Click(items.t.menuName,item.t.menuName,children.t.menuName,children.t)">{{children.t.menuName}}</el-menu-item>
                </el-submenu>

                <el-menu-item :index="item.t.menuUrl" v-show="!(item.size >= 1)" @click="menu2Click(items.t.menuName,item.t.menuName)">
                  <span slot="title">{{item.t.menuName}}</span>
                </el-menu-item>
              </div>
            </el-submenu>

            <!-- 没有二级菜单 el-menu-item -->
            <el-menu-item :index="items.t.menuUrl" v-show="!(items.size >= 1)" @click="menu1Click(items.t.menuName,items.t)">
              <i class="iconfont" v-html="items.t.menuIcon" style="font-size: 25px;color: #000000;"></i>
              &nbsp;<span slot="title">{{items.t.menuName}}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </div>

      <!-- 容器 -->
      <div class="home-content-right">
        <router-view  :breadCrumb="this.breadCrumb" :mode="this.mode" style="padding: 10px;min-width: 600px;" />
      </div>
    </div>


  </div>
</template>

<script>
  import  HomeHeader from '@/common/components/header'

  import HomeData from '@/assets/data/home.js'

  import MenuApi from '@/api/menuApi'
  import Encrypt from '@/common/utils/encrypt'
  import mixins from '@/mixins'
  import { toRouter } from '@/permission'
  import Utils from '@/common/utils/utils'

  import Vue from 'vue';
  import { Sticky } from 'vant';

  Vue.use(Sticky);
  export default{
    mixins:[mixins],
    // 后台首页
    name:"Home",
    data(){
      return{
        catalog:[],
        showData:[],
        menuList:[],
        //点击对象下的子数据
        clickData:[],
        iframeShow:false,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // 面包屑数据
        breadCrumb:[],
        // 远程连接
        mode:'',
        // 用户名
        uname:'',

        theMenuList:[]
      }
    },
    components:{
      HomeHeader,
    },

    created() {
        // toRouter()
        MenuApi.menuList().then(res => {
          this.catalog = res.data.data.children
          var theIndex = localStorage.getItem("activeIndex") ? true : false
          if(theIndex){
            var index = Encrypt.decryptCBC(localStorage.getItem("activeIndex"))
            // 获取到激活的下标
            this.menuList = this.catalog[index].children

            this.getRouter(this.catalog)
            this.theMenuList = Utils.unique(this.theMenuList)
            this.setMenuList(this.theMenuList)
          }
        })
    },
    methods:{
      getRouter(data){
        data.map(val => {
          this.theMenuList.push(val.t.menuUrl)
          if(val.size > 0){
            this.getRouter(val.children)
          }else{
            return 0
          }
        })
      },
      // 从header获取到点击对象
      // 传递的index
      theRouter(itemChildren){
        this.menuList = this.catalog[itemChildren].children
        // console.log(this.menuList)
      },

      // 点击三级菜单
      menu3Click(menu1,menu2,menu3,info){
        // 先置为空 上次的数据
        this.breadCrumb = []
        // 存入数据
        this.breadCrumb.push(menu1)
        this.breadCrumb.push(menu2)
        this.breadCrumb.push(menu3)

        // 存mode
        this.mode = info.model
      },
      // 点击二级菜单
      menu2Click(menu1,menu2){
        // 先置为空 上次的数据
        this.breadCrumb = []
        // 存入数据
        this.breadCrumb.push(menu1)
        this.breadCrumb.push(menu2)
      },
      // 点击一级菜单
      menu1Click(menu1,info){
        // 先置为空 上次的数据
        this.breadCrumb = []
        // 存入数据
        this.breadCrumb.push(menu1)
        // 存mode
        this.mode = info.model
      },
    },
    watch: {
        '$route'(to, from) {
          // alert(to.path)
          // if(to.path != '/login'){
          //   // 判断是否具有权限
          //   // console.log(this.menuLists)
          //     if(this.menuLists.indexOf(to.path) === -1){
          //         this.$router.push({
          //           path:'/pageNotFound'
          //         })
          //     }
          // }
        }
    }
  }
</script>

<style scoped="scoped">
  .elSide{
    height: 800px;
    color: #303133;
  }



  .home-content{
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .home-content-left{
    width: 240px;
    border-right: 1px solid #E4E7ED;
  }
  .home-content-right{
    flex: 1;
    /* padding: 15px; */
    min-height: 85vh !important;
    background-color: #f3f2f2;
  }
</style>
